<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>班级</title>
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 当前页css -->
    <link rel="stylesheet" href="./css/class.css">

</head>
<body>
<!-- 父容器 -->
<div class="container">
    <!-- 班级内容 -->
    <div class="choose-box">
        <!-- 班级内容 -->
        <div class="content">
            <!--使用swiper实现的轮播图-->
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <!-- 班级第一屏 （我的班级） -->
                    <li class="swiper-slide">
                        <div class="inner-content">
                            <ul>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                    </div>

                                    <div class="desc">
                                        <p class="class-name">郑州卓有01班</p>
                                        <span class="class-num"><span>42</span>人</span>
                                        <span class="active-count"><span class="active-percent">78</span></span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                    </div>

                                    <div class="desc">
                                        <p class="class-name">郑州卓有01班</p>
                                        <span class="class-num"><span>42</span>人</span>
                                        <span class="active-count"><span class="active-percent">78</span></span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                    </div>

                                    <div class="desc">
                                        <p class="class-name">郑州卓有01班</p>
                                        <span class="class-num"><span>42</span>人</span>
                                        <span class="active-count"><span class="active-percent">78</span></span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                    </div>

                                    <div class="desc">
                                        <p class="class-name">郑州卓有01班</p>
                                        <span class="class-num"><span>42</span>人</span>
                                        <span class="active-count"><span class="active-percent">78</span></span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                    </div>

                                    <div class="desc">
                                        <p class="class-name">郑州卓有01班</p>
                                        <span class="class-num"><span>42</span>人</span>
                                        <span class="active-count"><span class="active-percent">78</span></span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- 班级第二屏 （精华） -->
                    <li class="swiper-slide">
                        <div class="inner-content">
                            <!-- 精华问题 -->
                            <div class="best-ques">
                                <!-- 问题内容 -->
                                <div class="content">
                                    <ul>
                                        <li>
                                            <div class="ques">
                                                <!-- 回答者 -->
                                                <div class="author clearfix">
                                                    <div class="photo fl"></div>
                                                    <span class="nickname">铅笔小刀</span>
                                                    <!-- 点赞 -->
                                                    <button class="like fr"><span>36</span></button>
                                                    <!-- 评论 -->
                                                    <button class="comment fr"><span>18</span></button>
                                                    <br>
                                                    <span class="class">郑州管理03班</span>
                                                </div>
                                                <!-- 回复内容 -->
                                                <div class="cont">
                                                    <p>基本完整，不过感觉想法还不够狂野</p>
                                                </div>
                                                <p class="time">3分钟前</p>
                                                <!-- 回复的回复 -->
                                                <div class="second-reply">
                                                    <!-- 回复目标 -->
                                                    <p class="target">回复 <span class="reply-author">卷耳朵小象</span></p>
                                                    <p class="cont">一般，中间商不购买产品，不必为产品付款，也没有产品所有权</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="reply">
                                                <!-- 回答者 -->
                                                <div class="author clearfix">
                                                    <div class="photo fl"></div>
                                                    <span class="nickname">铅笔小刀</span>
                                                    <!-- 点赞 -->
                                                    <button class="like fr"><span>36</span></button>
                                                    <br>
                                                    <span class="class">郑州管理03班</span>
                                                </div>
                                                <!-- 回复内容 -->
                                                <div class="cont">
                                                    <p>基本完整，不过感觉想法还不够狂野</p>
                                                </div>
                                                <p class="time">3分钟前</p>
                                                <!-- 回复的回复 -->
                                                <div class="second-reply">
                                                    <!-- 回复目标 -->
                                                    <p class="target">回复 <span class="reply-author">卷耳朵小象</span></p>
                                                    <p class="cont">
                                                        一般，中间商不购买产品，不必为产品付款，也没有产品所有权一般，中间商不购买产品，不必为产品付款，也没有产品所有权</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="reply">
                                                <!-- 回答者 -->
                                                <div class="author clearfix">
                                                    <div class="photo fl"></div>
                                                    <span class="nickname">铅笔小刀</span>
                                                    <!-- 点赞 -->
                                                    <button class="like fr"><span>36</span></button>
                                                    <br>
                                                    <span class="class">郑州管理03班</span>
                                                </div>
                                                <!-- 回复内容 -->
                                                <div class="cont">
                                                    <p>基本完整，不过感觉想法还不够狂野</p>
                                                </div>
                                                <p class="time">3分钟前</p>
                                                <!-- 回复的回复 -->
                                                <div class="second-reply">
                                                    <!-- 回复目标 -->
                                                    <p class="target">回复 <span class="reply-author">卷耳朵小象</span></p>
                                                    <p class="cont">
                                                        一般，中间商不购买产品，不必为产品付款，也没有产品所有权一般，中间商不购买产品，不必为产品付款，也没有产品所有权</p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="swiper-slide">
                        <div class="inner-content">
                            <ul>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="swiper-slide">
                        <div class="inner-content">
                            <ul>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="img">
                                        <!-- 图片 -->
                                        <img src="" alt="">
                                        <i class="play"></i>
                                        <i class="listen"></i>
                                    </div>

                                    <div class="desc">
                                        <p class="title">第15周 班级课程：卓有成效的卓有成效的卓有成效的</p>
                                        <span class="author">包政</span>
                                        <span class="learn-count"><span class="learn-percent">78%</span>已学</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 激活边框 -->
                <i class="active-border"></i>
            </div>
        </div>
    </div>
</div>

<!-- 移动端适配 -->
<script src="./js/flexible.js"></script>
<script src="./js/time-filter.js"></script>
<script src="./js/mui-3.7.2.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/index.js"></script>
<script src="./js/class.js"></script>
</body>
</html>

